<%@ page import="controllers.UploadConnect"%>
<%@ page import="java.util.List,java.text.*"%>
<%@ page import="java.util.List,java.util.HashMap"%>
<%@ page import="models.COPSTemp"%>
<%@ page import="controllers.AppServletContextListener"%>
<%@ page import="com.googlecode.objectify.Objectify"%>
<%@ page import="com.googlecode.objectify.ObjectifyService"%>
<%@ page import="com.googlecode.objectify.Query"%>
<%@ page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>

<%


	String awd_file = "";
     
	BlobKey blob_key;
	String _key = (String) request.getParameter("tempPicKey");
	boolean ifound = false;
	Objectify ofy = ObjectifyService.begin();
	Query<COPSTemp> q = ofy.query(COPSTemp.class).filter("tempPicKey", _key);
	
	for (COPSTemp f : q.fetch()) {
		blob_key = f.getTempPicKey();
		
		if (blob_key != null) {
			awd_file = blob_key.getKeyString();
		}
		break;
	}
%>


<link rel="stylesheet" type="text/css" href="/css/iehacks1.css">
<link rel="stylesheet" type="text/css" href="/css/blog.css">
<link rel="stylesheet" type="text/css" href="/css/coreBlue.css">
<script src="/Jcrop/js/jquery.min.js"></script>
<script src="/Jcrop/js/jquery.Jcrop.min.js"></script>
<script src="/Jcrop/js/jquery.FieldsetToggle.js"></script>
<script src="/Jcrop/js/jcrop_demos.js"></script>



<script language="Javascript">
	function checkCoords() {
		if (parseInt(jQuery('#w').val()) > 0)
			return true;
		alert('Please select a crop region then press submit.');
		return false;
	};
	
	function storeValue(newValue) {
	    try {
	    	var returnFieldName ="photoimg";
	    	var youtubeimgsrc = document.getElementById("preview").src;
	    	
	    	var thefile = window.opener.document.getElementById('txtupload_file');
			alert(youtubeimgsrc);
              
 
	        var fieldReturn = window.opener.document.getElementById(returnFieldName);
	         fieldReturn.src = youtubeimgsrc;
	    }
	    catch (e) {
	        alert("There has been an error returning the selected values:\n\n" + e.message);
	    }
	    window.close();
	}
	
	
</script>

<script language="Javascript">
	$(function() {

		$('#jcrop_target').Jcrop({
			onChange : showPreview,
			onSelect : showPreview,
			onRelease : hidePreview,
			aspectRatio : 1
		});
		var $preview = $('#preview');
		function showPreview(coords) {
			if (parseInt(coords.w) > 0) {
				var rx = 100 / coords.w;
				var ry = 100 / coords.h;

				$preview.css({
					width : Math.round(rx * 500) + 'px',
					height : Math.round(ry * 370) + 'px',
					marginLeft : '-' + Math.round(rx * coords.x) + 'px',
					marginTop : '-' + Math.round(ry * coords.y) + 'px'
				}).show();
			}
		}

		function hidePreview() {
			$preview.stop().fadeOut('fast');
		}

	});
</script>




<body>


<%=_key%>
	<table>
		<tbody>
			<tr>
				<td style="padding: 5px;"><img src="/blobserve?blob-key=<%=awd_file%>" id="jcrop_target"
					style="width: 500px; height: 370px;">
				</td>
				<td valign="top"><td>Image Preview:<div
						style="width: 100px; height: 100px; overflow: hidden; margin-left: 5px;">
									<img src="/blobserve?blob-key=<%=awd_file%>" id="preview"
							style="width: 238px; height: 176px; display: none;">
								</div>
				</td>
			</tr>
			<tr>
			   <td colspan="1" align="left">
			        <input type="button" value="Select File"
					onclick="storeValue(true)" id="btnSubmitPhoto">
			         <input type="button" value="cancle" onclick= "Javascript:window.close()"
					id="btnUpload">
			   </td>
			</tr>
		</tbody>
	</table>
</body>









